.ga-popover {
  display: inline-block;
  padding: 10px;
  background-color: #000;
  color: #fff;
  border-radius: 8px;
  position: relative;
}
.arrow {
  position: absolute;
}
.arrow::after {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  background-color: #000;
  rotate: -45deg;
  z-index: 1;
}

.ga-popover[placement="top"] {
  translate: 0 -10px;
}
.ga-popover[placement="right"] {
  translate: 10px;
}
.ga-popover[placement="bottom"] {
  translate: 0 10px;
}
.ga-popover[placement="left"] {
  translate: -10px;
}

.ga-popover[placement="top"] .arrow {
  right: 50%;
  bottom: -5px;
  transform: translateX(50%);
}
.ga-popover[placement="right"] .arrow {
  top: 50%;
  left: -5px;
  transform: translateY(-50%);
}

.ga-popover[placement="bottom"] .arrow {
  top: -5px;
  right: 50%;
  transform: translateX(50%);
}
.ga-popover[placement="left"] .arrow {
  top: 50%;
  right: -5px;
  transform: translateY(-50%);
}
